<div class="ama-root-navigation">
    <adf-sidebar-action-menu
        *ngIf="actions$ | async as actions"
        [title]="'DASHBOARD.NEW_MENU.LABEL' | translate"
        [expanded]="expanded$ | async"
        class="ama-root-navigation__section ama-root-navigation__section--new"
        [ngClass]="{ 'ama-section--new--mini': !(expanded$ | async) }"
    >
        <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
        <div sidebar-menu-expand-icon>
            <mat-icon>add_box</mat-icon>
        </div>
        <div sidebar-menu-options>
            <ng-container *ngFor="let action of actions">
                <button mat-menu-item (click)="runAction(action.handler)">
                    <mat-icon>{{ action.icon }}</mat-icon>
                    <span>{{ action.title | translate }}</span>
                </button>
            </ng-container>
        </div>
    </adf-sidebar-action-menu>

    <div class="ama-root-navigation__section ama-root-navigation__section--menu" *ngFor="let list of navigation">
        <ul class="ama-root-navigation-menu">
            <ng-container *ngFor="let item of list">
                <li class="ama-root-navigation-menu__item" routerLinkActive #rla="routerLinkActive"
                    title="{{ item.title || '' | translate }}" *ngIf="!item.disabled">

                    <button mat-icon-button mat-ripple matRippleColor="primary" [routerLink]="item.route.url"
                        [color]="rla.isActive ? 'accent' : 'primary'" [matRippleTrigger]="rippleTrigger"
                        [matRippleCentered]="true" [title]="item.label | translate">
                        <mat-icon>{{ item.icon }}</mat-icon>
                    </button>

                    <span #rippleTrigger class="ama-menu__item--label" [routerLink]="item.route.url"
                        [hidden]="!(expanded$ | async)" [ngClass]="{
                                        'ama-menu__item--active': rla.isActive,
                                        'ama-menu__item--default': !rla.isActive
                                    }">{{ item.label | translate }}</span>
                </li>
            </ng-container>
        </ul>
    </div>
</div>
